<template>
    <view class="couponItem" :class="{ isUnusable: isUnusable }">
        <view class="couponCount">
            <image
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/couponPriceDisabled.png"
                class="couponBG"
                v-if="isUnusable"
            ></image>
            <image
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/couponPrice.png"
                class="couponBG"
                v-else
            ></image>
            <view class="couponData">
                <view class="couponprice" v-if="coupon.couponType === 0">
                    ¥<view class="couponpriceCount">{{ coupon.price }}</view>
                </view>
                <view class="couponprice" v-else>
                    <view class="couponpriceCount">{{ coupon.discount }}</view
                    >折
                </view>
                <view class="couponRule" v-if="coupon.couponType != 0 && !!coupon.discountAmountLimit">
                    最多抵￥{{ filterDiscountAmountLimit(coupon.discountAmountLimit) }}</view
                >
                <view class="couponRule" v-else-if="coupon.useCondition != 0">满{{ coupon.demandPrice }}元可用</view>
                <view class="couponRule" v-else>无门槛优惠券</view>
            </view>
        </view>
        <view class="couponDetail">
            <view class="detailDesc">{{ coupon.couponName || coupon.name || "" }}</view>

            <view class="couponBtns">
                <view class="btnDesc">{{ rangeText }}</view>
                <view v-show="!isUnusable" class="btn receiveBtn" :class="{ isShowBtn: showBtn }" @click="couponClick">
                    {{ btnText }}
                </view>
                <view v-show="isUnusable" class="btn receivedBtn" :class="{ isShowBtn: showBtn }">{{ btnText }}</view>
            </view>
            <view class="couponTime">{{ couponTime }}</view>
        </view>
    </view>
</template>

<script>
export default {
    name: "couponItem",
    props: {
        coupon: {
            type: Object,
            default: () => {},
        },
        showBtn: {
            type: Boolean,
            default: true,
        },
        btnText: {
            type: String,
            default: "立即领取",
        },
        isUnusable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    methods: {
        couponClick() {
            this.$emit("couponClick", this.coupon);
        },
        filterDiscountAmountLimit(amount) {
            if (!amount) {
                return "";
            }
            return amount;
        },
    },
    computed: {
        rangeText() {
            if (this.coupon.acceptGoodsType === 0) {
                return "全部商品可用";
            }
            if (this.coupon.acceptGoodsType === 1) {
                return "指定分类可用";
            }
            return "指定商品可用";
        },
        couponTime() {
            if (!!this.coupon.termStart) {
                return `${this.coupon.termStart} ~ ${this.coupon.termEnd}`;
            }
            return `领取后${this.coupon.expDayCount}天内有效`;
        },
    },
};
</script>

<style lang="scss" scoped>
.couponItem {
    display: flex;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    border: 1rpx solid #187154;
    border-left: 0;

    &.isUnusable {
        border: 1px solid #cccccc;
    }

    .couponCount {
        position: relative;
        width: 192rpx;
        height: 184rpx;
        color: #ffffff;
    }

    .couponBG {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 192rpx;
        height: 184rpx;
    }

    .couponData {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 192rpx;
        height: 184rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .couponprice {
            line-height: 72rpx;
            font-size: 32rpx;
        }

        .couponpriceCount {
            display: inline;
            height: 72rpx;
            font-size: 60rpx;
            font-family: HarmonyOS_Sans_Condensed_Medium;
        }

        .couponRule {
            height: 32rpx;
            font-size: 22rpx;
            line-height: 32rpx;
            text-align: center;
        }
    }

    .couponDetail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        padding: 00rpx 30rpx 0 20rpx;

        .detailDesc {
            max-height: 80rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            line-height: 40rpx;

            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .couponBtns {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16rpx;
            font-size: 24rpx;
            color: #666666;
        }

        .btnDesc {
            margin-top: 6rpx;
        }

        .btn {
            width: 136rpx;
            height: 56rpx;
            border-radius: 8px;
            font-size: 24rpx;
            font-weight: 500;
            color: #ffffff;
            line-height: 56rpx;
            text-align: center;
            opacity: 0;
        }

        .receiveBtn {
            background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
            box-shadow: 0px 24rpx 48rpx 0px rgba(55, 168, 148, 0.2);
        }

        .receivedBtn {
            background: #cccccc;
        }

        .isShowBtn {
            opacity: 1;
        }

        .couponTime {
            font-size: 20rpx;
            color: #999999;
        }
    }
}
</style>
